<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>123.html</title>

    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="this is my page">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">

    <!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
	<link rel="stylesheet" type="text/css" href="../ext/ext-all.css" />
		<script type="text/javascript" src="../ext/ext-base.js"></script>
<script type="text/javascript" src="../ext/ext-all.js"></script>

	<script type="text/javascript" src="../js/prototype-1.4.0.js"></script>
	<style type="text/css">
	.ext-ie .x-menu-item-icon {left: -24px; top: 0px;}
	.ext-strict .x-menu-item-icon {left: 3px; top: 3px;}
	.ext-ie6 .x-menu-item-icon {left: -24px; top: 0px;}


.popup {
    position: absolute;
    z-index: 50;
    border-collapse: collapse;
}

.popup td.corner {height: 15px;    width: 19px;}
.popup td#topleft { background-image: url(../images/bubble-1.png); }
.popup td.top { background-image: url(../images/bubble-2.png); }
.popup td#topright { background-image: url(../images/bubble-3.png); }
.popup td.left { background-image: url(../images/bubble-4.png); }
.popup td.right { background-image: url(../images/bubble-5.png); }
.popup td#bottomleft { background-image: url(../images/bubble-6.png); }
.popup td.bottom { background-image: url(../images/bubble-7.png); text-align: center;}
.popup td.bottom img { display: block; margin: 0 auto; }
.popup td#bottomright { background-image: url(../images/bubble-8.png); }

.popup table.popup-contents {
    font-size: 12px;
    line-height: 1.2em;
    background-color: #fff;
    color: #666;
    font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", sans-serif;
    }

table.popup-contents th {
    text-align: right;
    text-transform: lowercase;
    }

table.popup-contents td {
    text-align: left;
    }
	</style>

<script type="text/javascript">
function showPopup(element_id,event){
  var div = createElement("div");
  div.id = "popup";
  //div.style.display="none";
  var popup = $(element_id);
   //var popup = document.getElementById(element_id);
  //取得鼠标的绝对坐标
  var evt = event ? event : (window.event ? window.event : null);
  var x = Event.pointerX(evt)+5;
  var y = Event.pointerY(evt)+5;
  div.innerHTML='\
        <table style="top:' + y + 'px; left:' + x + 'px;" class="popup">\
          <tbody>\
            <tr>\
              <td class="corner" id="topleft"></td>\
              <td class="top"></td>\
              <td class="corner" id="topright"></td>\
            </tr>\
            <tr>\
              <td class="left"></td>\
              <td><table class="popup-contents">\
                <tbody>\
                    <tr>\
                      <td>' + popup.innerHTML + '</td>\
                    </tr>\
                </tbody>\
              </table></td>\
              <td class="right"></td>\
            </tr>\
            <tr>\
              <td id="bottomleft" class="corner"></td>\
              <td class="bottom"><!--<img src="../images/bubble-tail2.png" alt="popup tail" height="29" width="30">--></td>\
              <td class="corner" id="bottomright"></td>\
            </tr>\
          </tbody>\
        </table>';
  document.body.appendChild(div);
  //Element.show("popup");
}

function hidePopup(){
  Element.remove("popup");
}

function createElement(element) {
    if (typeof document.createElementNS != 'undefined') {
        return document.createElementNS('http://www.w3.org/1999/xhtml', element);
    }
    if (typeof document.createElement != 'undefined') {
        return document.createElement(element);
    }
    return false;
}
</script>
  </head>

  <body>
 <span id="abc" style="display:none">adasdasdasdasdasdasd</span>
 <span class="l1" onmouseover="showPopup('abc',event);" onmouseout="hidePopup()">ghfghdfgdfghdfg</span>

  </body>
</html>
